//样衣初选
<template>
<div>
    <common-header
        :title="title"
        :type=2
        message="批量发货"
        @allselect="allselect"
        @submit="submit"
        @cancel="checked = []"></common-header>
    <div class="mui-content">
        <mt-navbar v-model="selected">
            <mt-tab-item 
                v-for="(item, index) in categoryList" 
                :key="index" 
                :id="item.value">{{ item.label }}</mt-tab-item>
        </mt-navbar>
        <scroller
            ref="my_scroller"
            class="loading-div"
            style="top: 90px"
            :on-refresh="refresh"
            :on-infinite="infinite">
            <ul class="mui-table-view auditUl">
                <li class="mui-table-view-cell auditLis" v-for="item in list" :key="item.id" @click="viewDetail(item)">
                    <div class="mui-checkbox" v-show="show_check_box">
                        <input name="Checkbox" type="checkbox" v-model="checked" :value="item.id" @click.stop="choose(item)">
                    </div>
                    <div class="auditImg">
                        <img class="imgs" :src="item.img1" />
                    </div>
                    <div class="auditMessage">
                        <ul>
                            <li>
                                <p>编号:</p>
                                <p class="auditNum">{{ item.sampleid }}</p>
                            </li>
                            <li>
                                <!--<p>状态：</p>-->
                                <p class="auditState">{{ item.postflag | filterState }}</p>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </scroller>
    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import API from '@/service/api'
export default {
    components: { commonHeader },
    data() {
        return {
            checked: [],
            list: [],
            categoryList: [],
            selected: null,
            isNoData: false,
            pageSize: 10,
            pageIndex: 1,
        }
    },
    computed: {
        ...mapState( [ 'show_check_box', 'search_value' ] ),
        title() {
            if(!this.show_check_box){
                return '样衣初选单'
            }else {
                return `已选择${this.checked.length}个`
            }
        }
    },
    filters: {
        filterState(v) {
            if( v == 0 )
                return '未审核'
            else
                return '已审核'
        }
    },
    watch: {
        selected(newValue) {
            if(newValue) this.RECORD_SEARCH_VALUE({})
            this.list = []
            this.isNoData = false
            this.pageIndex = 1
            this.$refs.my_scroller.finishInfinite(false)
        }
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING', 'RECORD_SAMPLE_NO', 'RECORD_SAMPLE_ID', 'UPDAT_SHOW_CHECK_BOX', 'RECORD_SEARCH_VALUE' ] ),
        allselect() {
            this.checked = []
            this.list.forEach(element => {
                this.checked = [...this.checked, element.id]
            })
        },
        check() {
            let flag = true
            if(this.checked.length==0){
                this.$error('请选择！')
                flag =  false
                return flag
            }
            return flag
        },
        submit() {
            if(!this.check()) return
            this.RECORD_SAMPLE_ID(this.checked.join(','))
            this.$router.push( { name: 'primaryDelivery' } )
        },
        choose(item) {},
        async refresh (done) {
            this.list = []
            this.isNoData = false
            this.pageIndex = 1
            this.$refs.my_scroller.finishInfinite(false)
            done()
        },
        async infinite (done) {
            if(this.isNoData) return this.$refs.my_scroller.finishInfinite(true)
            let res = await this.search(this.selected)
            setTimeout(() => {
                if(res.list.length==0){//判断数是否加载完成，就让数据截停
                    this.isNoData = true
                }else{
                    this.list = [...this.list, ...res.list]
                    this.pageIndex++
                }
                done()
            }, 1000)
        },
        initialization() {
            //获取样衣列表
            API.dic.getBaseCateGoryList().then(res=> {
                this.categoryList = [ { label: '全部', value: null } ,...res ]
                this.UPDATE_SHOW_LOADING(false)
		    })
        },
        search(id) {
            let data = {}
            if(id) data = { dlid: id }
            else data = this.search_value
            data.pageSize= this.pageSize
            data.pageIndex= this.pageIndex
            return API.primary.getPrimaryList(data)
        },
        viewDetail(item) {
            this.RECORD_SAMPLE_NO(item.id)
            this.RECORD_SAMPLE_ID(item.sampleid)
            this.$router.push( { name: 'primaryDetail' } )
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style scoped>
.auditImg img {
    width: 100%;
    height: 100%;
    position: absolute;
}
.auditImg{
    position: relative;
    overflow: hidden;
	padding-bottom: 100%;/*重要属性*/
}
</style>


